import { CSSInterpolation } from "@ant-design/use-emotion-css";
import { GlobalToken } from "antd/es/theme/interface";

const mainClassName: CSSInterpolation | Array<CSSInterpolation> = {
  display: "flex",
  width: "100%",
  height: "100%",
  paddingTop: 16,
  paddingBottom: 16,
  overflow: "auto",
};

const leftMenuClassName = (
  token: GlobalToken,
): CSSInterpolation | Array<CSSInterpolation> => {
  return {
    width: 224,
    borderRight: `0.8px solid ${token.colorBorderSecondary}`,
  };
};

const avatarClassName: CSSInterpolation | Array<CSSInterpolation> = {
  textAlign: "center",
  overflow: "hidden",
  img: {
    width: 144,
    height: 144,
    borderRadius: "50%",
    marginBottom: 12,
  },
};

const nameClassName: CSSInterpolation | Array<CSSInterpolation> = {
  marginBottom: 4,
  fontWeight: 500,
};

const rightClassName: CSSInterpolation | Array<CSSInterpolation> = {
  flex: 1,
  paddingTop: 8,
  paddingBottom: 8,
  paddingLeft: 40,
  paddingRight: 40,
};

const titleClassName: CSSInterpolation | Array<CSSInterpolation> = {
  marginBottom: 12,
  fontWeight: 500,
};

export {
  mainClassName,
  leftMenuClassName,
  avatarClassName,
  nameClassName,
  rightClassName,
  titleClassName,
};
